<template>
    <div class="query">
        <div class="query-header mb-3">
            <div class="mb-2 pl-2 d-flex">
                <a-select
                    mode="tags"
                    placeholder="Please select"
                    :value="selectedTags"
                    style="width: 340px;"
                    :dropdownMenuStyle="{display: 'none'}"
                    @change="handleChange"
                ></a-select>
                <a-button type="primary" class="mx-2">搜索</a-button>
                <a-button type="danger" class="mx-2" @click="clearAll">&times;清除筛选项</a-button>
                <a-button type="primary" class="ml-auto"><a-icon type="export" :rotate="-90" /><span style="vertical-align: middle;">申请单类型</span></a-button>
            </div>
            <div>
                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'form')">
                        <a-menu-item key="租房申请">
                            <a-icon type="book"/>
                            租房申请
                        </a-menu-item>
                        <a-menu-item key="水电单缴纳">
                            <a-icon type="book"/>
                            水电单缴纳
                        </a-menu-item>
                        <a-menu-item key="其他单据一">
                            <a-icon type="book"/>
                            其他单据一
                        </a-menu-item>
                        <a-menu-item key="其他单据二">
                            <a-icon type="book"/>
                            其他单据二
                        </a-menu-item>
                    </a-menu>
                    
                    <a-button style="margin-left: 8px">
                        <span style="vertical-align: middle;">申请单类型</span><a-icon type="down"/>
                    </a-button>
                </a-dropdown>
                
                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'state')">
                        <a-menu-item key="未审批">
                            <a-icon type="close-circle" theme="twoTone" two-tone-color="#f5222d" />
                            未审批
                        </a-menu-item>
                        <a-menu-item key="审批中">
                            <a-icon type="exclamation-circle" theme="twoTone" two-tone-color="#faad14" />
                            审批中
                        </a-menu-item>
                        <a-menu-item key="审批完成">
                            <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" />
                            审批完成
                        </a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px;">
                        <span style="vertical-align: middle;">审批状态</span><a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </div>
        </div>
        <div class="query-body border">
            <div class="query-info">
                <div class="query-title mb-2">审批单据一</div>
                <ul class="d-flex justify-content-around align-items-center flex-wrap">
                    <li>申请单类型:水电单缴纳</li>
                    <li>申请人名称:蔡徐坤</li>
                    <li>现审批人:卢本伟</li>
                    <li>审批状态:未审批</li>
                    <li>审批单号:124535473946</li>
                    <li>申请日期:2021年1月5日</li>
                </ul>
            </div>
            <div class="query-state border-top border-bottom p-3">
                <div class="text-center font-weight-bolder font_size_20">审批状态</div>
                <a-steps :current="current" @change="onChange">
                    <a-step title="Step 1" description="未审批" />
                    <a-step title="Step 2" description="审批中" />
                    <a-step title="Step 3" description="审批完成" />
                </a-steps>
            </div>
            <div class="query-chart">
                <div class="text-center font-weight-bolder font_size_20">数据图表</div>
                <div style="height: 180px;"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Query",
    data(){
        return{
            current: 0,
            map: new Map(),
            selectedTags: []
        }
    },
    methods:{
        onChange(current){
            this.current = current;
        },
        handleMenuClick(e, type) {
            this.map.set(type,e.key);
            this.render();
        },
        render(){
            this.selectedTags = Object.values(Object.fromEntries(this.map));
        },
        clearAll(){
            this.map.clear();
            this.render();
        },
        handleChange(tags) {
            const deleteValue = this.selectedTags.filter(t=>!tags.includes(t))[0];
            for (const [k,v] of this.map.entries()) {
                if (v=== deleteValue){
                    this.map.delete(k);
                    this.render();
                }
            }
        }
    }
}
</script>

<style scoped>
.query-title{
    background-color: #ccc;
    color: #fff;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
}
.query-info ul li{
    margin: 5px 50px;
}
</style>

